<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8">
        <title>widgetcss - demo</title>
        <link rel="stylesheet" type="text/css" href="./screen.css" />
        <script type="text/javascript" src="./jquery.min.js"></script> 
        <style type="text/css">
            #main {width:68%;margin:0px auto;font-size:12px;}
            #main .section div.demo {margin-bottom:20px;}
            #main .section{clear:left;}
            .desc {color:#666;font:12px "Microsoft YaHei";margin-left:20px;}
        </style>
        <script>
         $(document).ready(function(){
                 var appleMemoCssClassNamePrefix = "widgetcss-widgets-applememo-";
                 var selected = "-selected"
                 var appleMemoColors = ["yellow","blue","green","pink","purple","gray"];
                 var appleMemoColorsName = ["黄色","蓝色","绿色","粉红色","紫色","灰色"];
                 var memoSection = $("#main #memo");
                 $.each(appleMemoColors,function(index,value){
                     var demo = ["<div>","这是一个Apple",appleMemoColorsName[index],"风格的便笺","<br/><code>&lt;div class=\"",appleMemoCssClassNamePrefix+value,"\"&gt;Content&lt;/div&gt;</code></div>"].join("");
                     $(demo).addClass("demo")
                            .addClass(appleMemoCssClassNamePrefix+value)
                            .css({"width":"25%","float":"left","margin-left":"4%",'height':"80px"})
                            .appendTo(memoSection);
                     var demo2 = ["<div>","这是一个被选择的Apple",appleMemoColorsName[index],"风格的便笺","<br/><code>&lt;div class=\"",appleMemoCssClassNamePrefix+value+selected,"\"&gt;Content&lt;/div&gt;</code></div>"].join("");
                     $(demo2).addClass("demo")
                            .addClass(appleMemoCssClassNamePrefix+value+selected)
                            .css({"width":"25%","float":"left","margin-left":"4%",'height':"80px"})
                            .appendTo(memoSection);
                 });
         });
        </script>
    </head>
    <body>
        <div id="main">
            <center><h1 style="margin:0px auto;text-align:center;">widgetcss支持的功能列表</h1></center>
            <hr/>
            <div id="memo" class="section">
                <h2>一、便笺<span class="desc">展示一小段文字</span> </h2>
                <div class="demo widgetcss-widgets-simplememo">
                     这是一个简单的便笺<br/>
                     <code>
                        &lt;div class="widgetcss-simplememo"&gt;Content&lt;/div&gt;
                     </code>
                </div>
            </div><!-- end section memo -->
            <div id="effect" class="section">
                <h2>二、阴影效果 <span class="desc">为Box对象添加一圈阴影</span> </h2>
                <div class="demo widgetcss-effects-glow">
                     <div class="widgetcss-widgets-applememo-green">
                         这是一个带有阴影效果的Apple风格的绿色风格便笺<br/>
                         <code>
                            &lt;div class="widgetcss-effects-glow"&gt;<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="widgetcss-simplememo-green"&gt;Content&lt;/div&gt;<br/>
                            &lt;/div&gt;
                         </code>
                      </div>
                 </div><!-- end demo -->
                 <div class="demo widgetcss-effects-glow" style="width:500px;">
                    <p>
                        为普通块级元素添加阴影效果<br/>
                        <code>
                            &lt;div class="widgetcss-effects-glow" style="width:500px;"&gt;<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Content&lt;/p&gt;<br/>
                            &lt;/div&gt;
                        </code>
                    </p>
                 </div><!-- end demo -->
            </div><!-- end section effect -->
            <div id="effect" class="section">
                <h2>三、圆角效果 <span class="desc">为Box对象添加圆角</span> </h2>
                <div class="demo widgetcss-effects-roundedbox" style="width:500px;background:yellow;">
                    <div style="width:100%;height:200px;">
                        这是一个添加了圆角效果的盒子<br/>
                        <code>
                            &lt;div class="demo widgetcss-effects-roundedbox" style="width:500px;"&gt;<br/>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content<br/>
                            &lt;/div&gt;
                        </code>
                    </div>
                 </div>
                 <div class="demo widgetcss-effects-glow" style="width:510px;height:206px;">
                     <div class="widgetcss-effects-roundedbox" style="width:500px;background:yellow;">
                        <div style="width:100%;height:200px;">
                            这是一个添加了圆角效果并且加了阴影的盒子<br/>
                            <code>
                                &lt;div class="demo widgetcss-effects-glow"&gt;<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="demo widgetcss-effects-roundedbox"&gt;<br/>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br/>
                                &lt;/div&gt;<br/>
                            </code>
                        </div>
                     </div>
                 </div>
            </div><!-- end section effect -->
            <div id="utility" class="section">
                <h2>四、尺子 <span class="desc">为Box对象添加一个小尺子，方便观察盒子具体宽度</span> </h2>
                <div class="demo widgetcss-utility-ruler" style="width:600px;">
                    <div class="widgetcss-effects-glow">
                         <div class="widgetcss-widgets-applememo-purple">
                                测量Box大小<br/>
                                <code>
                                  &lt;div class="widgetcss-utility-ruler" style="width:600px;"&gt;<br/>
                                  &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="widgetcss-effects-glow"&gt;<br/>
                                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="widgetcss-widgets-applememo-purple"&gt;<br/>
                                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content<br/>
                                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br/>
                                  &nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br/>
                                  &lt;/div&gt;
                                </code>
                          </div><!-- end appmemo -->
                    </div><!-- end effect-->
                </div><!-- end demo -->
                <div class="demo widgetcss-utility-ruler">
                    <div style="width:900px;height:200px;background:lime;">
                        测量Box大小<br/>
                        <code>
                            &lt;div class="demo widgetcss-utility-ruler" &gt;<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="width:900px;height:200px;background:lime;"&gt;<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br/>
                            &lt;/div&gt;
                        </code>
                    </div>
                </div><!-- end demo -->
            </div><!-- end section utility -->
        </div><!-- end main -->
    </body>
</html> 